<template>
    <div>
        <div v-if="btnFlag" class="m_top" @click="backTop"></div>
    </div>
</template>
<script>
   export default {
        name: 'Common',
        data () {
             return {
                "btnFlag":false,
             }
        },
        mounted () {
          window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
          window.removeEventListener('scroll', this.scrollToTop)
        },
        methods: {
          backTop () {
              let that = this
              let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                  clearInterval(timer)
                }
              }, 16)
          },
          scrollToTop () {
            let that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 300) {
              that.btnFlag = true
            } else {
              that.btnFlag = false
            }
          }
        }
    }
</script>
<style scoped>
.m_top{width:80px;height:80px;opacity:0.8;position:fixed;right:2%;bottom:12%;border-radius:50%;background:url(/static/images/top.png) no-repeat center center;background-size:100% 100%;z-index:999999999;}
</style>
